<template>
  <div>
    <div id="echarts" style="width:300px;height:200px"></div>
  </div>
</template>

<script>
import echarts from "echarts"
export default {
  data(){
    return{
      xAxis:[],
      yAxis:[],
    }
  },
  mounted(){
    this.$axios.get("echarts.json").then(res=>{
      res.data.data.forEach(el=>{
        this.xAxis.push(el.day)
        this.yAxis.push(el.number)
      })
      
      echarts.init(document.querySelector('#echarts')).setOption({
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xAxis
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: this.yAxis,
            type: 'line',
            areaStyle: {}
        }]
      })
    })
  }
}
</script>

<style scoped>
.el-header 
{
    background-color: #545c64;
    width: 100%;
    height: 8vh;
}

</style>